<template>
	<view class="container">
		<view class="content">
			<!--订单号-->
			<view class="order-number">
				订单号：{{ order.id }}
			</view>
			<!--司机信息-->
			<view class="driver">
				<!--头像-->
				<view class="avatar">
					<image :src="getDriverAvatarOrDefault(order.profileImg)" mode="aspectFill"></image>
				</view>
				<!--名称和驾龄等-->
				<view class="driver-info">
					<view class="name-and-id">
						<text>{{ order.surname }}师傅</text>
						&nbsp;
						<text>工号:{{ order.driverId }}</text>
					</view>
					<view class="years-and-times">
						<text>驾龄:{{ order.driverAge }}年</text>
						<!-- &nbsp;
						<text>代驾次数:10次</text> -->
					</view>
				</view>
				<!--打电话-->
				<view class="call" @tap="contactDriver">
					<uni-icons type="phone" size="24" color="#19afff"></uni-icons>
				</view>
			</view>
			<!--代驾信息-->
			<view class="from-and-to">
				<view class="from">
					<view class="dot green"></view>
					<view class="text">{{ order.currentAddr }}</view>
				</view>
				<view class="to">
					<view class="dot red"></view>
					<view class="text">{{ order.targetAddr }}</view>
				</view>
			</view>
			<!--总里程、总时间、总等待-->
			<view class="total-info">
				<view class="one-line">
					<text>总行驶里程</text>
					<text>{{ distance }}公里</text>
				</view>
				<view class="one-line">
					<text>总行驶时间</text>
					<text>{{ formatDateDiff(order.startTime, order.endTime) }}</text>
				</view>
				<view class="one-line">
					<text>总等待时间</text>
					<text>{{ formatDateDiff(order.reachTime, order.startTime) }}</text>
				</view>
			</view>
			<!--优惠券-->
			<view class="coupon">
				<view class="left">
					优惠券
				</view>
				<view class="right" @tap="chooseCoupon">
					<text class="amount" v-if="couponInfo.id">-￥{{ formatAmount(couponInfo.amount) }}</text>
					<text class="not-choose" v-else>未选择优惠券</text>
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			</view>
			<!--总价格-->
			<view class="total-price">
				<view class="up">
					<text>共 </text>
					<text class="color-price">{{ formatAmount(totalPrice) }}</text>
					<text> 元</text>
				</view>
				<view class="down" @tap="gotoAboutPage">
					查看价格表
				</view>
			</view>
		</view>
		<view class="btn" @tap="pay">
			立即支付
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getOrderById } from '@/api/order.js'
import { apiPay } from '@/api/payment.js'
import { orderTypeEnum } from '@/utils/orderType'
import { formatDateDiff } from '@/utils/datetimeUtil.js'
import { MAP } from '@/utils/qq-map-wx.js'
import { formatAmount } from '@/utils/amountUtil.js'
import { getDriverAvatarOrDefault } from '@/utils/imageUtil.js'

// 订单信息
const order = ref({
	id: "",
	businessType: null,
	currentLo: 116.397697,
	currentLa: 39.906036,
	currentAddr: "",
	targetLo: 116.397697,
	targetLa: 39.906036,
	targetAddr: "",
	orderTime: "",
	hopeTime: "",
	receiveTime: null,
	reachTime: null,
	startTime: null,
	endTime: null,
	price: 0,
	userId: "",
	username: "",
	profileImg: "",
	userPhone: "",
	status: -1,
	remark: null,
	driverId: null,
	driverAge: null,
	surname: null,
	name: null,
	driverPhone: null,
	driverStatus: null
})
// 里程
const distance = ref(0)

// 优惠券信息
const couponInfo = ref({
	id: null,
	amount: 0
})
// 优惠后价格
let totalPrice = computed(() => {
	const res = (order.value.price - couponInfo.value.amount).toFixed(1)
	return res > 0 ? res : 1
})

// 联系司机
function contactDriver () {
	uni.makePhoneCall({
		phoneNumber: order.value.driverPhone,
		success: () => {},
		fail: () => {}
	})
}

// 选择优惠券
function chooseCoupon () {
	uni.navigateTo({
		url: `/pages/order/choose-coupon?price=${order.value.price}`
	})
}

// 去收费详情页面
function gotoAboutPage () {
	uni.navigateTo({
		url: '/pages/index/about'
	})
}

// 选中优惠券
function onChooseCoupon ({ id, amount }) {
	couponInfo.value.id = id
	couponInfo.value.amount = amount
}

// 支付
function pay () {
	apiPay({ 
		orderId: order.value.id,
		couponUserId: couponInfo.value.id,
		payChannel: 0
	}).then(res => {
		// console.log(res.data)
		uni.requestPayment({
		    provider: "wxpay",
			appid: res.data.appId,
			package: res.data.packageValue,
			partnerid: "1726181070",
			prepayid: res.data.prepayId,
			nonceStr: res.data.nonceStr,
			timeStamp: res.data.timeStamp,
			paySign: res.data.paySign,
			signType: res.data.signType,
		    success(resp) {
				// console.log('支付成功', resp)
				uni.navigateBack()
				uni.showToast({
					icon: 'none',
					title: '支付成功'
				})
				uni.$emit('user-update-order-status', { id: order.value.id, status: orderTypeEnum.FINISH.code })
			},
		    fail(e) {
				uni.showToast({
					icon: 'none',
					title: '支付失败'
				})
			}
		})
		
	})
}

// drive路线
function initDistance () {
	MAP.direction({
		mode: 'driving',
		from: `${order.value.currentLa},${order.value.currentLo}`,
		to: `${order.value.targetLa},${order.value.targetLo}`,
		success: (res) => {
			distance.value = (res.result.routes[0].distance / 1000).toFixed(2)
		},
		fail: (err) => {
			console.error(err)
		}
	})
}

onLoad(e => {
	// 查询订单
	getOrderById(e.id).then(res => {
		order.value = res.data
		// 行驶里程
		initDistance()
	})
	
	// 监听选中优惠券事件
	uni.$on('choose-coupon', onChooseCoupon)
})

</script>

<style scoped lang="scss">
view {
	box-sizing: border-box;
}
.container {
	width: 100vw;
	height: 100vh;
	padding: 20rpx 30rpx 50rpx 30rpx;
	background-color: #f8f8f8;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	.content {
		width: 100%;
		.order-number {
			font-size: 25rpx;
		}
		.driver {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #dedede;
			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 30rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1rpx solid #ccc;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.driver-info {
				flex: 1;
				.name-and-id {
					font-size: 28rpx;
				}
				.years-and-times {
					font-size: 24rpx;
					margin-top: 15rpx;
					color: #888;
				}
			}
			.call {
				width: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.from-and-to {
			&>view {
				margin-top: 20rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				.dot {
					width: 18rpx;
					height: 18rpx;
					border-radius: 50%;
					margin-right: 15rpx;
				}
				.green {
					background-color: #00b400;
				}
				.red {
					background-color: #d60000;
				}
				.text {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 600rpx;
				}
			}
			.from {
			}
			.to {
			}
		}
		.total-info {
			margin-top: 30rpx;
			.one-line {
				margin-top: 20rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
		.coupon {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 10rpx;
			padding: 20rpx 0;
			.left {
				
			}
			.right {
				display: flex;
				align-items: center;
				.amount {
					margin-right: 5rpx;
					font-weight: bold;
					color: #ff3e1c;
				}
				.not-choose {
					font-size: 25rpx;
				}
			}
		}
		.total-price {
			padding: 30rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.up {
				text-align: center;
				text {
					font-size: 26rpx;
				}
				.color-price {
					color: #19afff;
					font-size: 40rpx;
				}
			}
			.down {
				margin-top: 15rpx;
				text-align: center;
				font-size: 24rpx;
				color: #19afff;
			}
			
		}
	}
	.btn {
		width: 100%;
		background: linear-gradient(135deg, #2196F3, #21CBF3);
		color: white;
		padding: 24rpx 0;
		text-align: center;
		border-radius: 20rpx;
		&:active {
			background: linear-gradient(135deg, #1b8bf3, #1bc5f3);
		}
	}
}
</style>